﻿<template>
	<div class="card-fill layout-padding">
		<el-card shadow="hover" class="layout-padding-auto" v-loading="isLoading" element-loading-text="正在加载数据...">
			<el-tabs v-model="activeTab">
				<el-tab-pane label="基本信息" name="main">
					<el-form ref="formRefFrameworkUser" :model="stateFrameworkUser.vmModel" label-width="120px">
						<el-row>
							<el-col :xs="24" :lg="12" class="mb20">
								<el-form-item ref="Entity_ITCode_FormItem" prop="Entity.ITCode" :label="$t('message.autotrans._Model_FrameworkUser_ITCode')">
									<el-input v-model="stateFrameworkUser.vmModel.Entity.ITCode" clearable disabled></el-input>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :lg="12" class="mb20">
								<el-form-item
									ref="Entity_Name_FormItem"
									prop="Entity.Name"
									:label="$t('message.autotrans._Model_FrameworkUser_Name')"
									:rules="[
										{
											required: true,
											message: $t('message._system.common.vm.input', { input: $t('message.autotrans._Model_FrameworkUser_Name') }),
											trigger: 'blur',
										},
									]"
								>
									<el-input v-model="stateFrameworkUser.vmModel.Entity.Name" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :lg="12" class="mb20">
								<el-form-item
									ref="Entity_IsValid_FormItem"
									prop="Entity.IsValid"
									:label="$t('message.autotrans._Model_FrameworkUser_IsValid')"
									:rules="[
										{
											required: true,
											message: $t('message._system.common.vm.input', { input: $t('message.autotrans._Model_FrameworkUser_IsValid') }),
											trigger: 'blur',
										},
									]"
								>
									<el-switch v-model="stateFrameworkUser.vmModel.Entity.IsValid" clearable></el-switch>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :lg="12" class="mb20">
								<el-form-item ref="Entity_PhotoId_FormItem" prop="Entity.PhotoId" :label="$t('message.autotrans._Model_FrameworkUser_Photo')">
									<wtm-upload-image v-model="stateFrameworkUser.vmModel.Entity.PhotoId" clearable thumb-width="128" />
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :xs="24" :lg="12" class="mb20">
								<el-form-item ref="Entity_CellPhone_FormItem" prop="Entity.CellPhone" :label="$t('message.autotrans._Model_FrameworkUser_CellPhone')">
									<el-input v-model="stateFrameworkUser.vmModel.Entity.CellPhone" clearable></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<!-- <el-row>
							<el-col :xs="24" :lg="12" class="mb20">
								<el-form-item
									ref="SelectedFrameworkUserGroupsIDs_FormItem"
									prop="SelectedFrameworkUserGroupsIDs"
									:label="$t('message.autotrans._AdminGroup')"
								>
									<el-cascader
										:options="stateFrameworkUser.AllFrameworkUserGroups"
										:props="{ multiple: true, checkStrictly: true, emitPath: false, label: 'Text', value: 'Value', children: 'Children' }"
										filterable
										class="w100"
										v-model="stateFrameworkUser.vmModel.SelectedFrameworkUserGroupsIDs"
										clearable
										disabled
									></el-cascader>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :lg="12" class="mb20">
								<el-form-item
									ref="SelectedFrameworkUserRolesIDs_FormItem"
									prop="SelectedFrameworkUserRolesIDs"
									:label="$t('message.autotrans._AdminRole')"
								>
									<el-cascader
										:options="stateFrameworkUser.AllFrameworkUserRoles"
										:props="{ multiple: true, checkStrictly: true, emitPath: false, label: 'Text', value: 'Value', children: 'Children' }"
										filterable
										class="w100"
										v-model="stateFrameworkUser.vmModel.SelectedFrameworkUserRolesIDs"
										clearable
										disabled
									></el-cascader>
								</el-form-item>
							</el-col>
						</el-row> -->
					</el-form>
				</el-tab-pane>

				<el-tab-pane label="岗位信息" name="position">
					<SysUserJobPosition
						:key="stateFrameworkUser.vmModel.Entity.ID || ''"
						:search-bar="false"
						:toolbar="true"
						:is-disabled="true"
						:UserId="stateFrameworkUser.vmModel.Entity.ID"
					/>
				</el-tab-pane>
			</el-tabs>

			<div style="text-align: right">
				<WtmButton
					@click="onSubmitFrameworkUser"
					type="primary"
					:button-text="$t('message.autotrans.SysSubmit')"
					style="margin-top: 15px"
					:disabled="isLoading"
				/>

				<WtmButton @click="onCloseFrameworkUser" type="primary" :button-text="$t('message.autotrans.SysClose')" style="margin-top: 15px" />
			</div>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="message.autotrans._Page_AdminFrameworkUserEdit;false">
import { ElMessage, ElLoading } from 'element-plus';
import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
import { frameworkuserApi } from '/@/api/_admin/frameworkuser';
import other from '/@/utils/other';
import { useRouter } from 'vue-router';

import SysUserJobPosition from '/@/views/_admin/sysuserjobposition/index.vue';

const ci = getCurrentInstance() as any;

// 定义变量内容
const activeTab = ref('main');
const formRefFrameworkUser = ref();
const isLoading = ref(false);
const stateFrameworkUser = reactive({
	vmModel: {
		Entity: {
			ITCode: '',
			Name: '',
			IsValid: true,
			PhotoId: null,
			ID: null,
			CellPhone: null,
		},

		SelectedFrameworkUserRolesIDs: [],
		SelectedFrameworkUserGroupsIDs: [],
	},

	AllFrameworkUserRoles: [] as any[],
	AllFrameworkUserGroups: [] as any[],
});

// 取消
const onCloseFrameworkUser = () => {
	closeDialog();
};

// 提交
const onSubmitFrameworkUser = () => {
	const loadingInstance = ElLoading.service({
		lock: true,
		text: '正在提交中，请等待。。。',
		background: 'rgba(0, 0, 0, 0.7)',
	});
	formRefFrameworkUser.value?.validate((valid: boolean) => {
		if (valid) {
			frameworkuserApi()
				.edit(stateFrameworkUser.vmModel)
				.then(() => {
					ElMessage.success(ci.proxy.$t('message._system.common.vm.submittip'));
					emit('refresh');
					closeDialog();
				})
				.catch((error) => {
					other.setFormError(ci, error);
				})
				.finally(() => {
					loadingInstance.close();
				});
		} else {
			loadingInstance.close();
		}
	});
};

// 页面加载时
onMounted(async () => {
	isLoading.value = true;

	try {
		// 并发执行所有API调用
		const promises = [];

		// 获取角色列表
		promises.push(
			other.getSelectList('/api/_Admin/FrameworkUser/GetFrameworkRoles', [], false).then((x) => {
				stateFrameworkUser.AllFrameworkUserRoles = x;
			})
		);

		// 获取用户组列表
		promises.push(
			other.getSelectList('/api/_Admin/FrameworkUser/GetFrameworkGroups?istree=true', [], true).then((x) => {
				stateFrameworkUser.AllFrameworkUserGroups = x;
			})
		);

		// 获取用户ID
		if (ci.attrs['wtmdata']) {
			stateFrameworkUser.vmModel.Entity.ID = ci.attrs['wtmdata'].ID;
		} else if (useRouter().currentRoute.value.query.id) {
			stateFrameworkUser.vmModel.Entity.ID = useRouter().currentRoute.value.query.id as any;
		}

		// 如果有用户ID，获取用户详情
		if (stateFrameworkUser.vmModel.Entity.ID) {
			promises.push(
				frameworkuserApi()
					.get(stateFrameworkUser.vmModel.Entity.ID ?? '')
					.then((data: any) => other.setValue(stateFrameworkUser.vmModel, data))
			);
		}

		// 等待所有API调用完成
		await Promise.all(promises);
	} catch (error) {
		ElMessage.error('加载数据失败，请重试');
	} finally {
		isLoading.value = false;
	}
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh', 'closeDialog']);
// 关闭弹窗
const closeDialog = () => {
	emit('closeDialog');
};
// 暴露变量
defineExpose({});
</script>

<style scoped lang="scss"></style>
